<template>
  <div>
    <!-- //精品歌单 -->
    <div class="qualityList_big">
      <div
        v-for="(item, index) in qualityList"
        :key="index"
        class="qualityList"
      >
        <div class="qualityList_img">
          <img :src="item.coverImgUrl" alt="" />
        </div>
        <div class="qualityList_tro">
          <div class="qualityList_tro_title">{{ item.name }}</div>
          <div class="qualityList_tro_info">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="tltlea">
      <img src="../../assets/image/音乐 (4).png" alt="" />
      More
      <div class="nav">
        <div :class="{ active: tag == '全部' }" @click="tag = '全部'">全部</div>
        <div :class="{ active: tag == '欧美' }" @click="tag = '欧美'">欧美</div>
        <div :class="{ active: tag == '华语' }" @click="tag = '华语'">华语</div>
        <div :class="{ active: tag == '流行' }" @click="tag = '流行'">流行</div>
        <div :class="{ active: tag == '说唱' }" @click="tag = '说唱'">说唱</div>
        <div :class="{ active: tag == '摇滚' }" @click="tag = '摇滚'">摇滚</div>
        <div :class="{ active: tag == '民谣' }" @click="tag = '民谣'">民谣</div>
        <div :class="{ active: tag == '电子' }" @click="tag = '电子'">电子</div>
        <div :class="{ active: tag == '轻音' }" @click="tag = 轻音乐">
          轻音乐
        </div>
        <div :class="{ active: tag == '影视原声' }" @click="tag = '影视原声'">
          影视原声
        </div>
        <div :class="{ active: tag == 'ACG' }" @click="tag = 'ACG'">ACG</div>
        <div :class="{ active: tag == '怀旧' }" @click="tag = '怀旧'">怀旧</div>
        <div :class="{ active: tag == '治愈' }" @click="tag = '治愈'">治愈</div>
        <div :class="{ active: tag == '旅行' }" @click="tag = '旅行'">旅行</div>
      </div>
    </div>
    <div class="troListBig">
      <div v-for="(item, index) in troList" :key="index" class="troListBox">
        <div class="troListImg">
          <img :src="item.coverImgUrl" alt="" :title="item.description" />
        </div>
        <div class="troListName">
          {{ item.name }}
        </div>
        <div class="troListTro">{{ item.description }}</div>
      </div>
      <el-pagination
      @current-change='handleCurrentChange'
      background
      layout="prev, pager, next"
      :current-page="page"
      :total="total">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
import axios from "axios";
import "@/assets/css/02.recommended.css";
export default {
  data() {
    return {
      //总条数
      total: 0,
      //页码
      page:1  ,
      //顶部推荐歌单
      qualityList: [],
      //推荐歌单
      troList: [],
      tag: "全部",
    };
  },
  watch: {
    tag() {
      this.topData()
      this.listData()
      this.page=1
    },
  },
  created() { 
     this.topData()
      this.listData()
      },
  methods:{
    topData(){
      axios({
        method: "get",
        url: "https://autumnfish.cn/top/playlist/highquality",
        params: {
          cat: this.tag,
          limit: 3,
        },
      })
        .then((res) => {
          this.qualityList = res.data.playlists;
          // console.log(this.qualityList);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    listData(){
      axios.get("https://autumnfish.cn/top/playlist/", {
          params: {
            cat: this.tag,
            limit: 10,
            //起始的值  （页码-1）*每页多少条数据
            offset:(this.page-1)*10,
          },
        })
        .then((res) => { 
          // console.log(res);
          this.total=res.data.total/10;
          this.troList = res.data.playlists;
        });},
        handleCurrentChange(val){
          this.page=val//保存页码
          //重新获取列表
          this.listData()
        }
  }
};
</script>

<style>
</style>